<template>
    <div class="wrapper">
        <div class="wrapper-inner container mx-auto">
            <div class="login-options">
                <span>当前登录端口 : </span>
                <span class="iconfont"><el-icon><ArrowDownBold/></el-icon></span>
                <span>{{ options }}</span>
                <div v-show="isShowList">
                    <p v-for="(index,item) in loginOptions"
                       :key="item"
                       @click="setOptions(index)">
                        {{ index }}
                    </p>
                    <p @click="admin">
                        管理员
                    </p>
                </div>
            </div>
            <LoginBox :options="options"/>
        </div>
    </div>
</template>

<script setup>
import LoginBox from "@/components/Login/LoginBox.vue";
import { reactive, ref } from "vue";
import { useServerStore } from "@/stores/server/server";
const server = useServerStore()
let loginOptions = reactive(["学生", "教师"])
let options = ref("学生")
const isShowList = ref(true)


function setOptions(value) {
    options.value = value
    isShowList.value = false
    setTimeout( ()=> {
        isShowList.value = true
    }, 50);
}

function admin() {
    // window.open("http://10.248.171.76:207/admin")
    window.open(server.ghyComputerIp + "admin")
}
</script>

<style scoped lang="less">

.wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    background: url("../../assets/Login/img/img.png") no-repeat center;
    background-size: cover;

    .wrapper-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .login-options {
        position: relative;
        min-width: 384px;
        min-height: 40px;
        line-height: 40px;
        padding: 0 12px;
        border: 1px solid rgba(250, 249, 249, 0.2);
        color: white;
        font-size: 16px;
        background-color: rgba(255, 255, 255, .2);
        margin-bottom: 50px;

        &:hover .iconfont {
            transform: rotate(0deg);
        }

        &:hover > div {
            height: 130px;
            border: 1px solid white;
        }

        span:nth-child(1) {
            float: left;
        }

        span:nth-child(2) {
            float: right;
            transition: all 75ms;
            transform: rotate(-90deg);
        }

        span:nth-child(3) {
            float: right;
            margin: 0 12px;
        }

        div {
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            height: 0;
            transition: 0.5s;
            overflow: hidden;
            color: black;
            background-color: white;
            z-index: 1;
        }
    }
}

</style>